<template>
	<el-card class="box-card page-view-area">
		<template #header>
			<div class="status"></div>
		</template>
		<div
			class="templates-wrapper"
			:key="item.id"
			:class="[item.id === templates.checkedId && 'templates-wrapper-active']"
			v-for="(item, index) in templates.list"
		>
			<div class="tools" v-if="item.id === templates.checkedId">
				<i class="el-icon-top" @click="upMove(index)" :class="{ 'i-disabled': index === 0 }"></i>
				<i class="el-icon-delete" @click="handleDelete()"></i>
				<i
					class="el-icon-bottom"
					@click="nextMove(index)"
					:class="{ 'i-disabled': index === templates.list.length - 1 }"
				></i>
			</div>
			<component
				@click="checkeComponent(item.id)"
				:is="item.componentName"
				:defaultProps="item.defaultProps"
			></component>
		</div>
	</el-card>
</template>

<script lang="javascript">
	import { useFactoryStore } from '@/hooks/useFactoryStore';
	import {
		GET_SHOP_DECORATION,
		UPDATE_CHECKEDID_SHOP_DECORATION,
		DELETE_CHECKEDID_SHOP_DECORATION,
		SWAP_SHOP_DECORATION
	} from '@/utils/Const';
	import { ref, getCurrentInstance } from 'vue';

	import HyNavBar from './HyNavBar';
	import HySearch from './HySearch';

	export default {
		components : {
			HyNavBar,
			HySearch
		},
		setup () {
			let Instance = getCurrentInstance().proxy;
			let { getter, mutation } = useFactoryStore({
				namespaced : 'shopDecoration',
				gettersMethod : [GET_SHOP_DECORATION],
				mutationsMethod : [
					UPDATE_CHECKEDID_SHOP_DECORATION,
					DELETE_CHECKEDID_SHOP_DECORATION,
					SWAP_SHOP_DECORATION
				]
			});

			let templates = ref(getter[GET_SHOP_DECORATION].value.mobile);
			let checkeComponent = (checkedId) => {
				let row = {
					ismobile : true,
					checkedId
				};
				mutation[UPDATE_CHECKEDID_SHOP_DECORATION](row);
			};

			let handleDelete = () => {
				Instance.$hyConfirm({
					subTitle : '确定删除该组件?',
					callback : async (done) => {
						mutation[DELETE_CHECKEDID_SHOP_DECORATION]({ ismobile : true });
						done();
					}
				});
			};

			let upMove = (index) => {
				if (Number(index) !== 0) {
					mutation[SWAP_SHOP_DECORATION]({
						index1 : index,
						index2 : index - 1,
						ismobile : true
					});
				}
			};
			let nextMove = (index) => {
				if (Number(index) !== templates.value.list.length - 1) {
					mutation[SWAP_SHOP_DECORATION]({
						index1 : index,
						index2 : index + 1,
						ismobile : true
					});
				}
			};
			return {
				upMove,
				nextMove,
				templates,
				handleDelete,
				checkeComponent
			};
		}
	};
</script>

<style lang="scss" scoped>
	.box-card {
		height: 85vh;
		width: 375px;
		margin: 0 20px;
		padding: 0;
		.el-card__header {
			padding: 0;
			border-bottom: 0;
		}
	}
	.status {
		height: 20px;
		width: 100%;
		background: url('~@/assets/images/status.png');
		background-size: cover;
	}
	.templates-wrapper {
		position: relative;
		cursor: pointer;
	}
	.tools {
		position: absolute;
		right: 0px;
		top: 0;
		z-index: 10;
		display: flex;
		background: rgba(0, 0, 0, 0.1);
		i {
			padding: 4px 6px;
			color: #2196f3;
			font-weight: bold;
			&:hover {
				background: rgba(0, 0, 0, 0.2);
			}
		}
	}
	.i-disabled {
		color: #cccccc !important;
		cursor: no-drop;
		pointer-events: none;
	}
	.templates-wrapper-active {
		border: 2px dotted #2196f3;
		padding: 5px 0;
		margin-bottom: 10px;
	}
</style>
<style lang="scss">
	.page-view-area {
		.el-card__header {
			padding: 0;
			border-bottom: 0;
		}
		.el-card__body {
			padding: 0;
		}
	}
</style>
